<template>
	<view>
		<view class="tab-box">
			<view class="tab-item" v-for="(item,index) in tabList" :key="index" :class="{'select':tabIndex===index}" @click="changeTab(index)">
				{{item}}
			</view>
		</view>
		
		<view class="tab-item" v-if="tabIndex===0">
			<view class="order-item" v-for="(item,index) in orderList" :key="index">
				<!-- 顶部标题区域 -->
				<view class="order-title">
					<view class="order-title-left">
						<image 
							:src="item.orderInfo.user_pic || '/static/logo.png'"
							mode="aspectFill"
							class="avatar-image"
						></image>
						<view class="title-time">
							<view class="title">
								{{item.type}}
							</view>
							<view class="time">
								时间:{{item.create_time}}
							</view>
						</view>
					</view>
					<view class="order-title-right" :class="{
						'status-pending': item.state == 0,
						'status-accepted': item.state == 1 || item.state == 2,
						'status-completed': item.state == 3
					}">
						{{getStatusText(item.state)}}
					</view>
				</view>
				
				<!-- 内容区域 -->
				<view class="order-content">
					<view>
						帮助内容: {{item.address}}
					</view>
					<view>
						取货地址: {{item.address}}
					</view>
					<view>
						目的地: {{item.address}}
					</view>
				</view>
				
				<!-- 金额和接单区域 -->
				<view class="order-price">
					<view class="price">
						金额: {{item.money}}
					</view>
					<view class="order-button" v-if="item.state !== 3" @click="getOrder(item)">
						接单
					</view>
				</view>
			</view>
		</view>
		
		<view class="tab-item" v-if="tabIndex===1">
			<view class="order-item" v-for="(item,index) in myOrder" :key="index">
				<!-- 顶部标题区域 -->
				<view class="order-title">
					<view class="order-title-left">
						<image 
							:src="item.orderInfo.user_pic || '/static/logo.png'"
							mode="aspectFill"
							class="avatar-image"
						></image>
						<view class="title-time">
							<view class="title">
								{{item.type}}
							</view>
							<view class="time">
								时间:{{item.create_time}}
							</view>
						</view>
					</view>
					<view class="order-title-right" :class="{
						'status-pending': item.state == 0,
						'status-accepted': item.state == 1 || item.state == 2,
						'status-completed': item.state == 3
					}">
						{{getStatusText(item.state)}}
					</view>
				</view>
				
				<!-- 内容区域 -->
				<view class="order-content">
					<view>
						帮助内容: {{item.address}}
					</view>
					<view>
						取货地址: {{item.address}}
					</view>
					<view>
						目的地: {{item.address}}
					</view>
				</view>
				
				<!-- 金额和接单区域 -->
				<view class="order-price">
					<view class="price">
						金额: {{item.money}}
					</view>

				</view>
			</view>
		</view>
			
		<view class="tab-item" v-if="tabIndex===2">
			<view class="order-item" v-for="(item,index) in helpOrder" :key="index">
				<!-- 顶部标题区域 -->
				<view class="order-title">
					<view class="order-title-left">
						<image 
							:src="item.orderInfo.user_pic || '/static/logo.png'"
							mode="aspectFill"
							class="avatar-image"
						></image>
						<view class="title-time">
							<view class="title">
								{{item.type}}
							</view>
							<view class="time">
								时间:{{item.create_time}}
							</view>
						</view>
					</view>
					<view class="order-title-right" :class="{
						'status-pending': item.state == 0,
						'status-accepted': item.state == 1 || item.state == 2,
						'status-completed': item.state == 3
					}">
						{{getStatusText(item.state)}}
					</view>
				</view>
				
				<!-- 内容区域 -->
				<view class="order-content">
					<view>
						帮助内容: {{item.address}}
					</view>
					<view>
						取货地址: {{item.address}}
					</view>
					<view>
						目的地: {{item.address}}
					</view>
				</view>
				
				<!-- 金额和接单区域 -->
				<view class="order-price">
					<view class="price">
						金额: {{item.money}}
					</view>

				</view>
			</view>

		
	
			
		</view>
	</view>
</template>

<script>

import { getOrderAll,getOrderMy,getOrderHelp,orderDelete,orderUpdateState } from "../../api/index.js";
	export default {
		data() {
			return {
				tabList:['全部订单','我的订单','我的帮助'],
				tabIndex:0,
				my_Id:"",
				my_state:"",
				orderList: [],
				myOrder:[],
				helpOrder:[]
			}
		},
		created(){ 
			// 获取storage中的用户数据 
			const user = uni.getStorageSync('userInfo'); 
			this.my_Id = user.id; 
			this.my_state = Number(user.state); 
			this.getList(); // 初始化获取全部订单 
		},

		methods: {
			changeTab(index) {
				this.tabIndex = index;
				if (index === 0) {
					this.getList();
				} else if (index === 1) {
					this.getMyOrder();
				} else if (index === 2) {
					this.getMyHelpOrder();
				}
			},
			//接单
			getOrder(id) {
				//接单前判断订单状态 my_state 是否为1  1为审核通过 允许接单
				if (this.my_state === 1) {
					orderUpdateState({
						id: id.id,
						state: 1,
						receivePerson: this.my_Id,
					}).then(res => {
						if(res.data.status == 0){
							uni.showToast({
							title: '接单成功',
							icon: 'success'
						});
						this.getList();
						}else{
							uni.showToast({
								title: '接单失败',
								icon: 'error'
							})
						}
						
					})
				}else{
					uni.showToast({
						title: '请先审核通过',
						icon: 'none'
					})
				}
			
			},
		
			// 获取全部订单
			getList() {
				getOrderAll().then(res => {
					if (res.data.status == 0) {
						let info = res.data.orderList.map(item => {
							// if (typeof item.orderInfo === 'string') {
							// 	item.orderInfo = item.orderInfo;
							// }
							const date = new Date(item.create_time);
							item.create_time = `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日${date.getHours()}时${date.getMinutes()}分`;
							item.money = Number(item.money); // 将金额转换为数字
							return item;
						});
						this.orderList = info;
					}
				});
			},

			// 获取我的订单
			getMyOrder() {
				getOrderMy(this.my_Id).then(res => {
					if (res.data.status == 0) {
						let info = res.data.order.map(item => {
							// if (typeof item.orderInfo === 'string') {
							// 	item.orderInfo = item.orderInfo;
							// }
							const date = new Date(item.create_time);
							item.create_time = `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日${date.getHours()}时${date.getMinutes()}分`;
							item.money = Number(item.money); // 将金额转换为数字
							return item;
						});
						this.myOrder = info;
					}
				});
			},

			// 获取我帮助的订单
			getMyHelpOrder() {
				getOrderHelp(this.my_Id).then(res => {
					if (res.data.status == 0) {
						let info = res.data.order.map(item => {
							// if (typeof item.orderInfo === 'string') {
							// 	item.orderInfo = item.orderInfo;
							// }
							const date = new Date(item.create_time);
							item.create_time = `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日${date.getHours()}时${date.getMinutes()}分`;
							item.money = Number(item.money); // 将金额转换为数字
							return item;
						});
						this.helpOrder = info;
					}
				});
			},

			getStatusText(state) {
				const statusMap = {
					0: '待接单',
					1: '进行中',
					2: '进行中',
					3: '已完成'
				}
				return statusMap[state] || '未知状态'
			}
		}
	}
</script>

<style scoped lang="scss">
.tab-box{
	display: flex;
	justify-content: space-around;
	height: 90rpx;
	align-items: center;
	background-color: #fff;
	border-bottom: 1rpx solid #f0f0f0;
	position: sticky;
	top: 0;
	z-index: 100;
	
	.tab-item {
		position: relative;
		padding: 0 20rpx;
		font-size: 28rpx;
		color: #666;
		
		&.select {
			color: #007AFF;
			font-weight: 500;
			
			&::after {
				content: '';
				position: absolute;
				bottom: -16rpx;
				left: 50%;
				transform: translateX(-50%);
				width: 40rpx;
				height: 4rpx;
				background: #007AFF;
				border-radius: 2rpx;
			}
		}
	}
}

.order-item {
	margin: 20rpx;
	background: #fff;
	border-radius: 16rpx;
	padding: 24rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
	
	.order-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16rpx;
		
		.order-title-left {
			display: flex;
			align-items: center;
			
			image {
				width: 88rpx;
				height: 88rpx;
				border-radius: 50%;
				margin-right: 24rpx;
				border: 2rpx solid #f5f5f5;
			}
			
			.title-time {
				.title {
					font-size: 30rpx;
					color: #333;
					font-weight: 500;
				}
				.time {
					font-size: 24rpx;
					color: #999;
					margin-top: 8rpx;
				}
			}
		}
		
		.order-title-right {
			font-size: 26rpx;
			padding: 8rpx 24rpx;
			border-radius: 24rpx;
			font-weight: 500;
			transition: all 0.3s ease;
			
			&.status-pending {
				color: #ff9900;
				background: rgba(255, 153, 0, 0.1);
				border: 1rpx solid rgba(255, 153, 0, 0.2);
				
				&::before {
					content: '•';
					margin-right: 6rpx;
					animation: blink 1.5s infinite;
				}
			}
			
			&.status-accepted {
				color: #007AFF;
				background: rgba(0, 122, 255, 0.1);
				border: 1rpx solid rgba(0, 122, 255, 0.2);
				
				&::before {
					content: '•';
					margin-right: 6rpx;
				}
			}
			
			&.status-completed {
				color: #67C23A;
				background: rgba(103, 194, 58, 0.1);
				border: 1rpx solid rgba(103, 194, 58, 0.2);
				
				&::before {
					content: '✓';
					margin-right: 6rpx;
					font-size: 24rpx;
				}
			}
		}
	}
	
	.order-content {
		margin: 20rpx 0;
		padding: 20rpx 0;
		border-top: 1rpx solid #f5f5f5;
		border-bottom: 1rpx solid #f5f5f5;
		
		view {
			font-size: 28rpx;
			color: #666;
			margin-bottom: 12rpx;
			line-height: 1.5;
			
			&:last-child {
				margin-bottom: 0;
			}
		}
	}
	
	.order-price {
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		.price {
			font-size: 32rpx;
			color: #ff4d4f;
			font-weight: 600;
		}
		
		.order-button {
			padding: 12rpx 36rpx;
			background: linear-gradient(135deg, #1890ff, #096dd9);
			color: #fff;
			border-radius: 30rpx;
			font-size: 28rpx;
			font-weight: 500;
			transition: all 0.3s;
			
			&:active {
				transform: scale(0.98);
				opacity: 0.9;
			}
		}
	}
}

@keyframes blink {
	0% { opacity: 1; }
	50% { opacity: 0.3; }
	100% { opacity: 1; }
}

</style>
